<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <!--edge浏览器H5兼容设置-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--360浏览器H5兼容设置-->
    <meta name="renderer" content="webkit" />
    <title>电脑商城</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--导入核心文件-->
    <script src="/computershop/static/web/bootstrap3/js/holder.js"></script>
    <link href="/computershop/static/web/bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="/computershop/static/web/bootstrap3/jquery-1.8.3.min.js"></script>
    <script src="/computershop/static/web/bootstrap3/js/bootstrap.js"></script>
    <script src="/computershop/static/web/js/menu.js" type="text/javascript" charset="utf-8"></script>
    <!-- 字体图标 -->
    <link rel="stylesheet" href="/computershop/static/web/bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="/computershop/static/web/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="/computershop/static/web/css/webindex.css" />
    <link rel="stylesheet" type="text/css" href="/computershop/static/web/css/footer.css" />
    <link rel="stylesheet" type="text/css" href="/computershop/static/web/css/top.css" />

    <style>
        #parCarousel{
            width: 100%;
        }
        #myCarousel .carousel-inner div img{
            width: 100%;
        }
    </style>
</head>

<body>
<!--头部-->
<jsp:include page="/WEB-INF/web/inc/header.jsp"></jsp:include>
<!--头部结束-->
<div class="container">
    <div class="row">
        <%-- 想做成只有滚动栏  static-web-js-menu.js 进行改动 --%>
        <div id="parCarousel" class="col-md-10" >
            <div id="myCarousel" class="carousel slide" >
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active" ></li>
                    <li data-target="#myCarousel" data-slide-to="1" ></li>
                    <li data-target="#myCarousel" data-slide-to="2" ></li>
                    <li data-target="#myCarousel" data-slide-to="3" ></li>
                    <li data-target="#myCarousel" data-slide-to="4" ></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner" align="center">
                    <div class="item active">
                        <img src="/computershop/static/web/images/index/index_banner1.png">
                    </div>
                    <div class="item">
                        <img src="/computershop/static/web/images/index/index_banner2.png">
                    </div>
                    <div class="item">
                        <img src="/computershop/static/web/images/index/index_banner3.png">
                    </div>
                    <div class="item">
                        <img src="/computershop/static/web/images/index/index_banner4.png">
                    </div>
                    <div class="item">
                        <img src="/computershop/static/web/images/index/index_banner5.png">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>

    <!--推荐栏目-->
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <p class="panel-title">新到好货</p>
                </div>
                <div class="panel-body panel-item">
                    <c:forEach items="${requestScope.newProductList}" var="product">
                        <div class="col-md-12">
                            <div class="col-md-7 text-row-2"><a href="/computershop/web/product?pid=${product.id}">${product.title}</a></div>
                            <div class="col-md-2">¥${product.price}</div>
                            <div class="col-md-3"><img src="/computershop/static/web${product.image}collect.png" class="img-responsive" /></div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <p class="panel-title">热销排行</p>
                </div>
                <div id="hot-list" class="panel-body panel-item">
                    <c:forEach items="${requestScope.hotProductList}" var="product">
                        <div class="col-md-12">
                            <div class="col-md-7 text-row-2"><a href="/computershop/web/product?pid=${product.id}">${product.title}</a></div>
                            <div class="col-md-2">¥${product.price}</div>
                            <div class="col-md-3"><img src="/computershop/static/web${product.image}collect.png" class="img-responsive" /></div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页脚开始-->
<jsp:include page="/WEB-INF/web/inc/foot.jsp"></jsp:include>
<!--页脚结束-->
</body>

</html>
